import React, { Component } from 'react';
import { Layout } from 'antd';
import { connect } from 'react-redux';

import IHeader from './components/Header';
import IAside from './components/NavLeft';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons';
import './statics/iconfont/iconfont.css';

const { Header, Content, Sider } = Layout;

class Main extends Component {
	state = {
		collapsed: false,
	};
	
	onScroll =(e)=>{
        // eslint-disable-next-line
        const scrollTop = e.target.scrollTop;
        // eslint-disable-next-line
        const clientHeight = e.target.clientHeight;
        // eslint-disable-next-line
        const scrollHeight = e.target.scrollHeight;
        const isBottom = scrollTop + clientHeight === scrollHeight;
        if (isBottom && scrollTop) {
			this.props.toBottom();
        }
	}
	
	toggle = () => {
		this.setState({
			collapsed: !this.state.collapsed,
		});
	};
	
	render(){
		return (
			<Layout style={{ height: "100vh" }}>
				<Header style={{ zIndex: 1, padding: 0}}>
					<IHeader />
				</Header>
				<Layout>
				    <Sider trigger={null} collapsible collapsed={this.state.collapsed} width={220}>
						{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
							className: 'navleft-trigger',
							onClick: this.toggle,
						})}
						<IAside collapsed={this.state.collapsed} />
				    </Sider>
					<Content style={{ background: '#fff' }} onScroll={this.onScroll}>
						{this.props.children}
					</Content>
				</Layout>
			</Layout>
		)
	}
}

export default connect(null,dispatch=>({
	toBottom(){
		dispatch({
			type:"IS_BOTTOM",
			isBottom:true
		})	
	},
}))(Main) ;